import React, { useEffect, useState } from "react";
import { Tabs, Swiper } from "antd-mobile";
import previous from "../../../assets/icon/common_list_previous_n.png";
import next from "../../../assets/icon/common_information_next_n.png";
import more from "../../../assets/icon/common_icon_more_n.png";
import "./index.css";
import { useAppDispatch, useAppSelector } from "../../../store";
import {
  getAknowledgeNav,
  getConsultationDoctors,
} from "../../../store/sliceReducer/HomeSliceReducer";
import TopNav from "../../../components/topNav";
import request from "../../../utils/request";
import { useNavigate } from "react-router-dom";
const Index: React.FC = () => {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
  const { knowledgeNav } = useAppSelector((state) => state.home);
  const [tabsValue, setTbsValue] = useState("7");
  const [mintabsValue, setminTbsValue] = useState<string>("1");
  const typeSort = [
    {
      title: "综合",
      id: "1",
    },
    {
      title: "好评",
      id: "2",
    },
    {
      title: "咨询数",
      id: "3",
    },
    {
      title: "价格",
      id: "4",
    },
  ];
  const [condition, setcondition] = useState(1);
  const [pagenum, setpagenum] = useState(1);
  const params: {
    deptId: string;
    condition: string;
    sortBy: number;
    page: number;
    count: number;
  } = {
    deptId: tabsValue,
    condition: mintabsValue,
    sortBy: 0,
    page: pagenum,
    count: 3,
  };
  const [doctorInfo, setdoctorInfo] = useState<any>({
    badNum: 0,
    doctorId: 204,
    doctorName: "1",
    imagePic: "1",
    inauguralHospital: "1",
    jobTitle: "医师",
    praise: "0.00%",
    praiseNum: 0,
    serverNum: 0,
    servicePrice: 500,
  });
  const [consultationDoctors, setconsultationDoctors] = useState<any[any]>([]);
  const [doctorId, setdoctorId] = useState(0);
  // 医生数据
  const getList = () => {
    request
      .get(`/api/health/user/inquiry/v1/findDoctorList`, { params })
      .then((res) => {
        const { status, result } = res.data;
        console.log(result);

        if (status == "0000") {
          setconsultationDoctors(result);
          setdoctorId(result[0].doctorId);
          doctorChange(0, result[0]);
        } else {
          return;
        }
      });
  };
  useEffect(() => {
    // 顶部导航
    dispatch(getAknowledgeNav());
    getList();
  }, []);

  const doctorChange = (id: number, it: any) => {
    // const doctor = consultationDoctors.find((v) => v.doctorId === id);
    setdoctorInfo(it);
    if (id > 0) {
      setdoctorId(id);
    }
  };

  const nextDoctor = () => {
    Object.assign(params, {
      page: params.page + 1,
    });
    getList();
  };
  const minTbsValue = (value: string) => {
    // console.log(value);

    setminTbsValue(value);
    // console.log(mintabsValue);

    getList();
  };
  const changeTopNav = (value: string) => {
    setTbsValue(value);
    getList();
  };
  return (
    <div className="consultation">
              <TopNav title="问诊咨询" />
      <div className="consultation_content">
        <Tabs activeKey={tabsValue} onChange={(value) => changeTopNav(value)}>
          {knowledgeNav &&
            knowledgeNav.map((v: any) => {
              return (
                <Tabs.Tab title={v.departmentName} key={v.id}>
                  <div className="content_box">
                    <Tabs
                      activeKey={mintabsValue}
                      onChange={(value) => minTbsValue(value)}
                    >
                      {typeSort.map((v) => {
                        return (
                          <Tabs.Tab title={v.title} key={v.id}>
                            <div className="content">
                              {/* 详细信息 */}
                              {doctorInfo && (
                                <div
                                  className="detailedInformation"
                                  onClick={() =>
                                    navigate("/AdoctorDetail/" + doctorId)
                                  }
                                >
                                  <div className="doctor_img">
                                    <img
                                      src={doctorInfo.imagePic}
                                      className="doctor"
                                      alt=""
                                    />
                                  </div>
                                  <div className="detailedText">
                                    <div className="detailedText_name">
                                      <span className="name">
                                        {doctorInfo.doctorName}
                                      </span>
                                      <span className="type">
                                        {doctorInfo.jobTitle}
                                      </span>
                                    </div>
                                    <div className="detailedText_dz">
                                      <span>
                                        {doctorInfo.inauguralHospital}
                                      </span>
                                      <img src={more} alt="" />
                                    </div>
                                    <div className="detailedText_num">
                                      <div>
                                        <span>好评率</span>
                                        <span>{doctorInfo.praise}</span>
                                      </div>
                                      <div>
                                        <span>服务患者数</span>
                                        <span>{doctorInfo.serverNum}</span>
                                      </div>
                                    </div>
                                  </div>
                                  <div className="detailedMoney">
                                    <div className="money">
                                      {doctorInfo.servicePrice}H币/次
                                    </div>
                                    <div className="btn" onClick={(e) =>{
                                      e.stopPropagation()
                                       navigate(`/doctorChat/${doctorInfo.doctorId}`)
                                    }}>立即咨询</div>
                                  </div>
                                </div>
                              )}

                              {/* 底部分页 */}
                              <div className="pagination">
                                <img src={previous} className="prev" alt="" />
                                <div className="center_box">
                                  <div
                                    className="center_centent"
                                    style={{ marginRight: "0" }}
                                  >
                                    {consultationDoctors &&
                                      consultationDoctors.map((v: any) => {
                                        return (
                                          <div
                                            key={v.doctorId}
                                            className={
                                              doctorId == v.doctorId
                                                ? "center_centent_card active"
                                                : "center_centent_card"
                                            }
                                            onClick={() =>
                                              doctorChange(v.doctorId, v)
                                            }
                                          >
                                            <img src={v.imagePic} alt="" />
                                            <div className="name">
                                              {v.doctorName}
                                            </div>
                                          </div>
                                        );
                                      })}
                                  </div>
                                </div>
                                <img
                                  src={next}
                                  className="next"
                                  alt=""
                                  onClick={nextDoctor}
                                />
                              </div>
                            </div>
                          </Tabs.Tab>
                        );
                      })}
                    </Tabs>
                  </div>
                </Tabs.Tab>
              );
            })}
        </Tabs>
      </div>
    </div>
  );
};

export default Index;
